<!-- 财务管理- 开发商返还款查询-->
<template>
  <div>
    <el-form :inline="true" :model="ruleForm" ref="ruleForm">
      <el-form-item label="开发商：">
        <el-input v-model="ruleForm.developerName" placeholder="请输入开发商名称"></el-input>
      </el-form-item>
      <el-form-item label="项目：">
        <el-input v-model="ruleForm.projectName" placeholder="请输入项目信息"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" id="monitorEnter">查询</el-button>
        <el-button @click="onClear">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" :index="typeIndex" type="index" label="序号" width="50"></el-table-column>
      <el-table-column align="center" prop="developerName" label="开发商"></el-table-column>
      <el-table-column align="center" prop="projectName" label="项目"></el-table-column>
      <el-table-column align="center" prop="paidAmount" label="返还款累计金额（元）"></el-table-column>
      <el-table-column align="center" label="返还款已使用金额">
        <el-table-column align="center" prop="totalAmount" label="合计（元）"></el-table-column>
        <el-table-column align="center" prop="developerAmount" label="返还开发商（元）"></el-table-column>
        <el-table-column align="center" prop="thirdPartyAmount" label="通过第三方返还个人（元）"></el-table-column>
        <el-table-column align="center" prop="personalAmount" label="返还个人（员工）（元）"></el-table-column>
        <el-table-column align="center" prop="shoppingCardAmount" label="购买购物卡（非经纪人奖励）（元）"></el-table-column>
        <el-table-column align="center" prop="promotionAmount" label="推广营销（元）"></el-table-column>
        <el-table-column align="center" prop="otherAmount" label="其他（元）"></el-table-column>
        <el-table-column align="center" prop="cashAmount" label="经纪人现金奖（元）"></el-table-column>
        <el-table-column align="center" prop="cardAmount" label="经纪人购物卡奖（元）"></el-table-column>
      </el-table-column>
      <el-table-column align="center" prop="frozenAmount" label="返还款冻结金额（元）"></el-table-column>
      <el-table-column align="center" prop="notReturnAmount" label="返还款剩余金额（元）"></el-table-column>
    </el-table>
    <div class="pagebar">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :current-page.sync="ruleForm.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="ruleForm.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import utils from '@/common/utils'
import api from '@/api/apiPath'
export default {
  name: "developerQuery",
  title:'返回款查询',
  data() {
    return {
      ruleForm: {
        pageNum: 1,
        pageSize: 10,
        developerName: '',
        projectName: '',
      },
      tableData: [],
      total: 0
    };
  },
  created() {
    this.list();
  },
  activated(){
    this.onSearch()
  },
  methods: {
    handleSizeChange(size) {
      this.ruleForm.pageSize = size;
      this.list();
    },
    handleCurrentChange(page) {
      this.ruleForm.pageNum = page;
      this.list();
    },
    // 接口容易超时  不加请求时间限制
    list() {
      this.axios.post(api.reimbursementTotalQuery, this.ruleForm).then(data => {
        let res = data.data.data;
        for(let item of res.data) {
          for(let [key, value] of Object.entries(item)) {
            if(key !== 'developerName' && key !== 'projectName') {
              item[key] = utils.formatMoney(value); 
            }
            if(value === null) {
              item[key] = 0;
            }
          }
        }
        this.tableData = res.data;
        for(let [key, value] of Object.entries(res.totaData)) {
          if(key !== 'developerName' && key !== 'projectName') {
            res.totaData[key] = utils.formatMoney(value); 
          }else {
            res.totaData[key] = '——';
          }
          if(value === null && key !== 'developerName' && key !== 'projectName') {
            res.totaData[key] = 0;
          }
        }
        this.tableData.unshift(res.totaData);
        this.total = res.total;
      });
    },
    typeIndex(key) {
      if(key === 0) {
        return '合计'
      }else {
        return key
      }
    },
    onSearch() {
      this.ruleForm.pageNum = 1;
      this.list();
    },
    onClear() {
      this.ruleForm = {
        pageNum: 1,
        pageSize: 10,
        developerName: '',
        projectName: '',
      };
      this.list()
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">

</style>
